<template>
    <view class="container">
        <!-- 地址栏智能识别 -->
        <view class="smart-recognition">
            <textarea placeholder="智能地址解析" class="smart-textarea" v-model="SmartAddress"></textarea>
        </view>
        <view>
            <u-gap height="20" bg-color="#f8f8f8"></u-gap>
            <u-form :model="info" class="form" ref="uFormRef">
                <u-form-item label="收货人" label-width="140" prop="receiverName">
                    <u-input v-model="info.receiverName" placeholder="输入收货人姓名" input-align="right" :clearable="false"> </u-input>
                </u-form-item>
                <u-form-item label="电话" label-width="140" prop="receiverPhone">
                    <u-input v-model="info.receiverPhone" type="number" placeholder="输入收货人手机号" input-align="right" :clearable="false"></u-input>
                </u-form-item>
                <u-form-item label="所在地区" label-width="140" prop="address">
                    <u-input v-model="info.address" placeholder="选择省/市/区" input-align="right" disabled @click="show = true"></u-input>
                    <u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="changeArea"></u-select>
                </u-form-item>
                <u-form-item label="详细地址" label-width="140" prop="detailAddress">
                    <u-input v-model="info.detailAddress" placeholder="街道门牌，楼层房间号等信息" input-align="right" :clearable="false"></u-input>
                </u-form-item>
            </u-form>
            <u-gap height="20" bg-color="#f8f8f8"></u-gap>
            <view class="setDefault">
                <u-checkbox :value="info.isDefault === 1 ? true : false" @change="checkedChange" active-color="#fc4f75">设为默认地址</u-checkbox>
            </view>
            <view class="u-margin-40 u-flex">
                <u-button type="p" class="smart-btn" @click="recognition">识别</u-button>
                <u-button type="p" class="btn" @click="submit">保存并使用</u-button>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref, computed } from 'vue'
interface T {
    [key: string]: any
}

const userStore = useUserStore()
/** 地址解析字符串 */
const SmartAddress = ref('')
const show = ref(false)
const info = reactive<T>({
    isDefault: 0,
    receiverName: '',
    receiverPhone: '',
    address: '',
    detailAddress: ''
})

const uFormRef = ref<any>(null)

/** 默认 */
const areaCode = ref(['33', '3304', '330483'])

const list = computed(() => {
    return uni.getStorageSync('cf_app_cityData') || []
})

onLoad((option: any) => {
    if (option.item) {
        let arr = []
        option = JSON.parse(option.item)
        if (option) {
            Object.assign(info, option)

            if (option.provinceName) {
                arr.push(option.provinceName)
            }
            if (option.cityName) {
                arr.push(option.cityName)
            }
            if (option.areaName) {
                arr.push(option.areaName)
            }
            info.address = arr.join('-')
        }
    }
})
const changeArea = (e: any) => {
    let temp: Array<any> = []
    e.map((m: any) => {
        if (m.label) temp.push(m.label)
    })
    info.address = temp.join('-')
    info.provinceCode = e[0].value
    info.provinceName = e[0].label
    info.cityCode = e[1].value
    info.cityName = e[1].label
    info.areaCode = e[2].value
    info.areaName = e[2].label
}

const checkedChange = (e: any) => {
    info.isDefault = e.value ? 1 : 0
}

const recognition = () => {
    console.log(SmartAddress.value)
    if (!SmartAddress.value) {
        uni.$u.toast('请粘贴地址信息')
        return
    }
    uni.$u.$api.BaseApi.addressAnalysis({ address: SmartAddress.value }).then((res: any) => {
        console.log(res)
        // 过滤 某一级为空的情况
        let arr = [res.province, res.city, res.county, res.town].filter(m => m)
        Object.assign(info, {
            receiverName: res.person,
            receiverPhone: res.phonenum,
            detailAddress: res.detail,
            provinceCode: res.province_code,
            provinceName: res.province,
            cityCode: res.city_code,
            cityName: res.city,
            areaCode: res.county_code || res.twon_code,
            areaName: res.county || res.town,
            address: arr.slice(0, 3).join('-')
        })
        console.log(info)
    })
}

const submit = () => {
    uFormRef.value?.validate((valid: any) => {
        if (valid) {
            let para = Object.assign(info, { merchantId: userStore.userInfo.merchantId })
            para = uni.$u.$tools.dealNullParams(para)
            uni.$u.$api.MerchantApi.saveOrUpdateAddress(para).then((res: any) => {
                let msg = info.id ? '修改成功!' : '添加成功!'
                uni.$u.toast(msg)
                setTimeout(() => {
                    // 添加成功之后 应该是返回前页 而不是跳转页面
                    uni.$u.$MRouter.back()
                }, 1000)
            })
        }
    })
}
</script>

<style scoped lang="scss">
.container {
    height: 100vh;
    .smart-textarea {
        background-color: $uni-bg-color;
        padding: 20rpx;
        font-size: 26rpx;
        border-radius: 10rpx;
        width: 100%;
        margin-top: 20rpx;
    }
    .smart-btn {
        width: 200rpx;
    }
}

.form {
    padding: 0 40rpx;
    background-color: $uni-bg-color;
}

.setDefault {
    background-color: $uni-bg-color;
    padding: 30rpx 50rpx;
}

.btn {
    width: 230rpx;
}
</style>
